<template>
  <div
    class="breadcrumbs"
    style="
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
    "
  >
    <div style="display: flex">
      <component
        :is="element"
        :to="base || ''"
        :aria-label="t('files.home')"
        :title="t('files.home')"
      >
        <!--      <i class="material-icons">home</i>-->
        <el-icon>
          <HomeFilled />
        </el-icon>
      </component>

      <span v-for="(link, index) in items" :key="index">
        <span class="chevron"
          ><i class="material-icons">keyboard_arrow_right</i></span
        >
        <component :is="element" :to="link.url">{{ link.name }}</component>
      </span>
    </div>
    <el-button type="primary" style="color: white" @click="show"
      >新建文件夹
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import { useLayoutStore } from "@/stores/layout";

const layoutStore = useLayoutStore();
const { t } = useI18n();

function show() {
  layoutStore.showHover("newDir");
}

const route = useRoute();

const props = defineProps<{
  base: string;
  noLink?: boolean;

}>();

const items = computed(() => {
  const relativePath = route.path.replace(props.base, "");
  const parts = relativePath.split("/");

  if (parts[0] === "") {
    parts.shift();
  }

  if (parts[parts.length - 1] === "") {
    parts.pop();
  }

  const breadcrumbs: BreadCrumb[] = [];

  for (let i = 0; i < parts.length; i++) {
    if (i === 0) {
      breadcrumbs.push({
        name: decodeURIComponent(parts[i]),
        url: props.base + "/" + parts[i] + "/",
      });
    } else {
      breadcrumbs.push({
        name: decodeURIComponent(parts[i]),
        url: breadcrumbs[i - 1].url + parts[i] + "/",
      });
    }
  }

  if (breadcrumbs.length > 3) {
    while (breadcrumbs.length !== 4) {
      breadcrumbs.shift();
    }

    breadcrumbs[0].name = "...";
  }

  return breadcrumbs;
});

const element = computed(() => {
  if (props.noLink) {
    return "span";
  }

  return "router-link";
});
</script>

<style scoped>
:deep(.el-icon svg) {
  width: 26px;
  height: 26px;
}

:deep(.el-icon) {
  width: 26px;
  height: 26px;
}

:deep(.el-button > span) {
  color: #ffffff !important;
}
</style>
